<template>
    <div class="phenological-period-statistics container-bottom-20">
        <CardBox title="物候期统计"></CardBox>
        <div class="content-container content-container-height-262">
            <div class="phenological-period-statistics-chart" ref="phenologicalPeriodStatisticsChart" style="height: 262px;"></div>
        </div>
    </div>
</template>

<script>
import * as echarts from 'echarts'
import CardBox from '@/components/Global/CardBox.vue'
export default {
    components: {
        CardBox
    },
    data() {
        return {
            phenologicalPeriodStatisticsChart: null,
            chartData: {
                categories: ['萌芽期', '展叶期', '抽条期', '花芽期', '始花期', '盛花期', '末花期', '果实期', '叶变色期', '叶脱落期', '枯萎休眠期'],
                values: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
            }
        }
    },
    mounted() {
        this.getData()
    },
    methods: {
        getData(){
            const currentDate = new Date();
            const year = currentDate.getMonth()==0?currentDate.getFullYear()-1:currentDate.getFullYear();
            const month = currentDate.getMonth()==0?12:currentDate.getMonth();
            this.$api.patrol.groupByTagAndMonth({year:year,month:month,tag:this.chartData.categories}).then(response => {
                if (response&&response.length>0) {
                    this.chartData.values=response;
                    this.initChart();
                }
            }).catch(error => {
                console.error('Error :', error);
            });

        },
        initChart() {
            if (this.phenologicalPeriodStatisticsChart) {
                this.phenologicalPeriodStatisticsChart.dispose()
                this.phenologicalPeriodStatisticsChart = null
            }
            const chartDom = this.$refs.phenologicalPeriodStatisticsChart
            if (!chartDom) return

            this.phenologicalPeriodStatisticsChart = echarts.init(chartDom)

            const option = {
                tooltip: {
                    trigger: 'axis',
                    backgroundColor: 'rgba(0,24,106,0.8)',
                    borderColor: 'rgba(0,150,255,0.3)',
                    textStyle: {
                        color: '#fff',
                        fontFamily: 'DIN Pro'
                    }
                },
                grid: {
                    top: '10%',
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: this.chartData.categories,
                    axisLine: {
                        lineStyle: {
                            color: 'rgba(255,255,255,0.3)'
                        }
                    },
                    axisLabel: {
                        color: '#fff',
                        interval: 0
                    }
                },
                yAxis: {
                    type: 'value',
                    splitLine: {
                        lineStyle: {
                            color: 'rgba(255,255,255,0.1)'
                        }
                    },
                    axisLine: {
                        lineStyle: {
                            color: 'rgba(255,255,255,0.3)'
                        }
                    },
                    axisLabel: {
                        color: '#fff',
                        fontFamily: 'DIN Pro'
                    }
                },
                series: [
                    {
                        type: 'pictorialBar',
                        data: this.chartData.values,
                        barWidth: '20%',
                        symbol: 'path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z',
                        itemStyle: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [{
                                    offset: 0,
                                    color: '#3DD78C'
                                }, {
                                    offset: 1,
                                    color: '#3DD78C'
                                }]
                            },
                            borderRadius: [4, 4, 0, 0]
                        },
                        label: {
                            show: true,
                            position: 'top',
                            color: '#fff',
                            formatter: '{c}'
                        }
                    }
                ]
            }

            this.phenologicalPeriodStatisticsChart.setOption(option)
        }
    },
    beforeDestroy() {
        if (this.phenologicalPeriodStatisticsChart) {
            this.phenologicalPeriodStatisticsChart.dispose()
            this.phenologicalPeriodStatisticsChart = null
        }
    }
}
</script>

<style lang="scss" scoped>
.phenological-period-statistics {
}
</style>

